<template>
	<view class="page">
		<view class="page-content" style="padding-bottom: 130rpx;">
			<view class="p12">
				<view class="u-flex" @click.stop="toUser()">
					<u-avatar size="76" :src="info.userAvatar"></u-avatar>
					<view class="pl12">
						<view class="fz16">{{info.userName}}</view>
						<view class="mt4 c9 fz12">{{info.createTimeFormat}}</view>
					</view>
				</view>
				
			</view>
			
			<u-swiper  :list="info.sliderPicUrls" height="280">
			</u-swiper>
			<view class="p12 mt15">
				<view class="fz14 u-font-bold">{{info.title}}</view>
				<view class="fz12 mt14" v-html="info.content"></view>
			<view class="bt pt25 mt25">
				
				<view class="module-info bg-white">
					<view class="module-comment">
						<view class="comment-list">
							<view class="item" v-for="(item,index) in flowList" :key="index">
								<view class="u-flex mb15 bm pb15" style="align-items: flex-start;">
									<u-avatar size="60" :src="item.userAvatar"></u-avatar>
									<view class="pl10">
										<view class="fz13 c0">
											{{item.userName}}
										</view>
										<view class="fz12 u-f-jsb u-flex mt3 c9">{{item.reviewDateFormat}}
											
										</view>
										<view class="mt10 fz12 lh20">
											<view>{{item.content}}</view>
										</view>
										<view v-if="item.subPage">
											<view v-for="(item1,index1) in item.subPage.list" class="u-flex mt15" style="align-items: flex-start;">
												<u-avatar size="40" :src="item1.userAvatar"></u-avatar>
												<view class="pl10">
													<view class="" style="font-size: 20rpx;">
														{{item1.userName}}
													</view>
													<view class="fz12 u-f-jsb u-flex mt3 c9">{{item1.reviewDateFormat}}
														
													</view>
													<view class="mt10 fz12 lh20 c0">
														<view>{{item1.content}}</view>
													</view>
													
												</view>
											</view>
										</view>
										
									</view>
								</view>
				
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
			
			<view class="u-flex fixed-bottom bt">

				<view>
					<u-input @confirm="sureComment" style="width: 280rpx;background: #EFEFEF;border-radius: 50rpx;"
						v-model="comment" placeholder="我来说两句~" type="text" :clearable="false" />
				</view>
				<view class="f1 pl10 pr10">

					<view class="act-item u-flex u-f-justify" @click="toLike()">
						<u-icon name="heart" size="36"></u-icon>
						<view class="ml3">{{info.likeCount || 0}}</view>
					</view>
					<view class="act-item  u-flex u-f-justify" @click="toCorrect()">
						<u-icon name="star" size="36"></u-icon>
						<view class="ml3">{{info.collectCount || 0}}</view>
					</view>
					<view class="act-item  u-flex u-f-justify">
						<u-icon name="more-circle" size="36"></u-icon>
						<view class="ml3">{{totalNum || 0}}</view>
					</view>
					
				</view>
			</view>

			<u-modal v-model="showComment" title="评论内容" @confirm="toSet" :showCancelButton='true' negative-top="300px">
				<view class="slot-content">
					<view class="p15">
						<u-input class="u-border" v-model="comment" placeholder="请输入" type="text" :clearable="false" />
					</view>
				</view>
			</u-modal>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: '#F9D719'
				},
				bannerList:['https://diy.cdevelopment.cn/admin-api/infra/file/18/get/eff8af0ed2983a7240bfce7d1f877a3b5c5f82b11b00b97fb761691e934f84e7.png'],
				comment: '',
				showComment: false,
				info: {},
				page:1,
				totalNum:0,
				flowList:[],
				curId: '',
			}
		},
		onLoad(e) {
			this.curId = e.id
		},
		onShow() {
			this.getData()
			this.initData()
		},

		onShareAppMessage(e) {


			this.$api.groupShare({
					id: this.curId
				},
				res => {
					if (res.status) {}
				}
			);
		},
		methods: {
			toPreview(img, idx) {
				uni.previewImage({
					urls: img,
					current: idx
				});
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},

			toCorrect() {
				let api='compositionCollectCreate'
				if(this.info.isLike){
					api='compositionCollectCancel'
				}else{
					api='compositionCollectCreate'
				}
				this.$api[api]({
						compositionId: this.info.id
					},
					res => {
						if (res.code == 200) {
							this.$common.errorToShow(res.message)
							this.getData()
						} else {

							this.$common.errorToShow(res.message)
						}
					}
				);

			},
			toLike() {
				let api='compositionLikeCreate'
				if(this.info.isLike){
					api='compositionLikeCancel'
				}else{
					api='compositionLikeCreate'
				}
				this.$api[api]({
						compositionId: this.info.id
					},
					res => {
						if (res.code == 200) {
							this.$common.errorToShow(res.message)
							this.getData()
						} else {

							this.$common.errorToShow(res.message)
						}
					}
				);

			},
			toComment(id) {
				this.replyId = id
				this.showComment = true
			},
			toSet() {

				this.sureComment(this.replyId, 'hui')
			},
			sureComment(id, type) {

				let post = {
					compositionId: this.curId,
					parentId:0,
					content: this.comment
				}
				if (type) {
					post.parentId = id
				}
				this.$api.compositionReviewCreate(post, res => {
					if (res.code == 200) {
						this.comment = ''
						this.getData()
						this.initData()
					}
				})
			},

			initData() {
				this.page = 1
				this.flowList = []
				this.getList()

			},
			getList() {
				this.$api.compositionReviewList({
					pageNo: this.page,
					compositionId:this.curId,
					pageSize: 10,
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.totalNum=res.data.total
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			getData() {
				this.$api.compositionInfo({
					id: this.curId
				}, res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.act-item {
		flex: 1;
		position: relative;
		text-align: center;
		.share-btn {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			opacity: 0;

		}
	}

	.module-circle {

		.btn {
			background: rgba(255, 251, 230, 0.43);
			border-radius: 22px;
			border: 1px solid #FAD719;
			width: 110rpx;
			padding: 6rpx 0;
			text-align: center;
			margin-left: 10rpx;
		}

		.btn1 {
			background: rgba(223, 77, 88, 0.2);
			;
			border: 1px solid #DF4D58;

		}
	}
</style>